<template>
  <el-dialog title="设置"  :visible.sync="visible" width="25%">
    <div class="form-box">
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="formInline"
        label-width="80px"
      >
        <div
          v-for="(item, index) in formInline.cardObj.cardParams"
          :key="index"
        >
          <el-form-item
            label="卡号:"
            :prop="`cardObj.cardParams[${index}].cardAccount`"
            :rules="[
              { required: true, message: '请输入卡号', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model.trim="formInline.cardObj.cardParams[index].cardAccount"
              placeholder="请输入卡号"
              maxlength="50"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="密码:"
            :prop="`cardObj.cardParams[${index}].cardPassword`"
            :rules="[
              { required: true, message: '请输入密码', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model.trim="formInline.cardObj.cardParams[index].cardPassword"
              placeholder="请输入密码"
              maxlength="50"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="有效日期:"
            :prop="`cardObj.cardParams[${index}].indate`"
            :rules="[
              { required: true, message: '请选择截止日期', trigger: 'blur' }
            ]"
            class="border-bottom"
          >
            <el-date-picker
              v-model.trim="formInline.cardObj.cardParams[index].indate"
              type="datetime"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="输入截止日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="success"
              @click="addCardParams"
              v-if="cardObjNum == index && check()"
              >新增</el-button
            >
            <el-button
              @click.prevent="
                deleteCardParams(formInline.cardObj.cardParams[index])
              "
              v-if="
                formInline.cardObj.cardParams.length > 1 && cardObjNum == index
              "
            >
              删除
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="visible = false"
        >取 消</el-button
      >
      <el-button type="success" @click="confirm('ruleForm')">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  deliverGood
} from '@/api/activityCenter/prizeManage'
export default {
  data() {
    return {
      visible: false,
      row: {},
      formInline: {
        cardObj: {
          cardParams: [
            {
              cardAccount: '',
              cardPassword: '',
              indate: ''
            }
          ]
        }
      },
      cardObjNum: 0,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        }
      },
      rules: {}
    }
  },
  methods: {
    show(row) {
      this.row = row
      this.visible = true
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields()
        this.$refs.ruleForm.clearValidate()
      })
    },
    handleClose(done) {
      done()
    },
    // 新增
    addCardParams() {
      const length = this.formInline.cardObj.cardParams.length
      this.cardObjNum = length
      this.formInline.cardObj.cardParams.push({
        cardAccount: '',
        cardPassword: '',
        indate: ''
      })
    },
    // 删除
    deleteCardParams(item) {
      var index = this.formInline.cardObj.cardParams.indexOf(item)
      if (index !== -1) {
        this.formInline.cardObj.cardParams.splice(index, 1)
      }
      this.cardObjNum = this.formInline.cardObj.cardParams.length - 1
    },
    // 控制新增按钮展示
    check() {
      const length = this.formInline.cardObj.cardParams.length
      const cardAccount = this.formInline.cardObj.cardParams[length - 1]
        .cardAccount
      const cardPassword = this.formInline.cardObj.cardParams[length - 1].cardPassword
      const indate = this.formInline.cardObj.cardParams[length - 1]
        .indate
      if (length > 0) {
        if (cardAccount && cardPassword && indate) {
          return true
        } else {
          return false
        }
      }
    },
    confirm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const { id } = this.row
          deliverGood(id, this.formInline.cardObj.cardParams,'virtual', () => {
            this.$emit('refresh')
            this.$message.success('发放成功')
            this.visible = false
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.border-bottom {
  border-bottom: 1px solid #DCDFE6;
  padding: 0 0 20px 0;
}
</style>
